<template>
	<view class="security-container">
		<!-- 用户基本信息 -->
		<view class="user-info-section">
			<view class="user-avatar">
				<image :src="userInfo.avatar" mode="aspectFill" class="avatar-img"></image>
			</view>
			<view class="user-details">
				<view class="user-name-row">
					<text class="user-nickname">{{ userInfo.nickname || userInfo.username }}</text>
					<view class="member-badge" :class="getMemberBadgeClass(userInfo.memberType)">
						{{ userInfo.memberType === 'VIP' ? 'VIP' : '普通' }}
					</view>
				</view>
				<text class="user-username">@{{ userInfo.username }}</text>
				<view class="points-info">
					<text class="points-label">积分：</text>
					<text class="points-value">{{ userInfo.pointsTotal || 0 }}</text>
				</view>
			</view>
		</view>

		<!-- 安全选项列表 -->
		<view class="security-list">
			<view class="section-title">账户安全</view>
			<!-- 更改绑定手机 -->
			<view class="security-item" @click="goToIdentityVerification('phone')">
				<view class="item-content">
					<text class="item-title">更改绑定手机</text>
					<text class="item-value">{{ maskedPhone }}</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>

			<!-- 修改支付密码 -->
			<view class="security-item" @click="goToIdentityVerification('password')">
				<view class="item-content">
					<text class="item-title">修改支付密码</text>
					<text class="item-value">{{ userInfo.payPassword ? '已设置' : '未设置' }}</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>
		</view>

		<!-- 其他设置 -->
		<view class="settings-list">
			<view class="section-title">其他设置</view>
			<!-- 用户服务协议 -->
			<view class="settings-item" @click="goToUserAgreement">
				<view class="item-content">
					<text class="item-title">用户服务协议</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>

			<!-- 隐私政策 -->
			<view class="settings-item" @click="goToPrivacyPolicy">
				<view class="item-content">
					<text class="item-title">隐私政策</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>

			<!-- 关于我们 -->
			<view class="settings-item" @click="goToAboutUs">
				<view class="item-content">
					<text class="item-title">关于我们</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-btn" @click="showLogoutConfirm">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { get } from "@/utils/request";
	export default {
		data() {
			return {
				userInfo: {
					username: '',
					nickname: '',
					avatar: '/static/my/西红柿.jpg',
					memberType: '普通',
					phone: '',
					pointsTotal: 0,
					payPassword: null
				}
			}
		},
		computed: {
			// 脱敏的手机号
			maskedPhone() {
				if (!this.userInfo.phone) return '未绑定';
				return this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		},
		onLoad() {
			// 从缓存获取 userId
			const userId = uni.getStorageSync("userId");
			if (!userId) {
				console.warn("未找到 userId，请先登录");
				return;
			}
		
			// 调用接口获取用户信息
			get(`/core/members/${userId}`).then(res => {
				console.log("用户信息接口返回：", res);
				const data = res && (res.data || res);
				if (data) {
					this.userInfo.username = data.username || this.userInfo.username;
					this.userInfo.avatar = data.avatar || this.userInfo.avatar;
					this.userInfo.nickname = data.nickname || this.userInfo.nickname;
					this.userInfo.memberType = data.memberType || this.userInfo.memberType;
					this.userInfo.phone = data.phone || this.userInfo.phone;
					this.userInfo.pointsTotal = data.pointsTotal || this.userInfo.pointsTotal;
					this.userInfo.payPassword = data.payPassword;
				}
			}).catch(err => {
				console.error("获取用户信息失败：", err);
			});
		},
		methods: {
			// 获取会员徽章样式
			getMemberBadgeClass(type) {
				return type === 'VIP' ? 'badge-vip' : 'badge-normal';
			},
			
			// 跳转到身份验证页面
			goToIdentityVerification(type) {
				// 将操作类型存储到本地，供身份验证页面使用
				uni.setStorageSync('securityOperationType', type);
				uni.setStorageSync('currentPhone', this.userInfo.phone);
				
				uni.navigateTo({
					url: './identityVerification'
				});
			},

			// 跳转到用户服务协议
			goToUserAgreement() {
				uni.navigateTo({
					url: '/pages/mySxz/userAgreement/userAgreement'
				});
			},

			// 跳转到隐私政策
			goToPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/mySxz/privacyPolicy/privacyPolicy'
				});
			},

			// 跳转到关于我们
			goToAboutUs() {
				uni.navigateTo({
					url: '/pages/mySxz/aboutUs/aboutUs'
				});
			},

			// 显示退出登录确认
			showLogoutConfirm() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.logout();
						}
					}
				});
			},

			// 退出登录
			logout() {
				// 清除本地存储的用户信息
				uni.removeStorageSync('userId');
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
				
				// 显示退出成功提示
				uni.showToast({
					title: '退出成功',
					icon: 'success',
					duration: 1500
				});
				
				// 延迟跳转到登录页面
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.security-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	// 用户信息区域
	.user-info-section {
		background: linear-gradient(135deg, #1BBC9B, #16A085);
		padding: 60rpx 40rpx 40rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.user-avatar {
			margin-right: 30rpx;

			.avatar-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
			}
		}

		.user-details {
			flex: 1;

			.user-name-row {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.user-nickname {
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
					margin-right: 16rpx;
				}

				.member-badge {
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 16rpx;
					border: 1rpx solid rgba(255,255,255,0.4);
				}

				.badge-vip {
					background: linear-gradient(90deg,#ffcf33,#ff9933);
					color: #4a2d00;
					border-color: rgba(255,207,51,0.6);
				}

				.badge-normal {
					background-color: rgba(255,255,255,0.15);
					color: #fff;
				}
			}

			.user-username {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.85);
				margin-bottom: 10rpx;
			}

			.points-info {
				display: flex;
				align-items: center;

				.points-label {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
				}

				.points-value {
					font-size: 24rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}

	// 分组标题
	.section-title {
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 40rpx 10rpx;
		background-color: #f5f5f5;
	}

	// 安全选项列表
	.security-list {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	// 设置选项列表
	.settings-list {
		background-color: #fff;
		margin-bottom: 40rpx;
	}

	// 安全选项项
	.security-item, .settings-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		cursor: pointer;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background-color: #f8f8f8;
		}
		
		.item-content {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-title {
				font-size: 28rpx;
				color: #333;
			}

			.item-value {
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	// 退出登录区域
	.logout-section {
		padding: 0 40rpx;

		.logout-btn {
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border: 1rpx solid #ff4757;
			border-radius: 12rpx;
			color: #ff4757;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				background-color: #fff5f5;
			}
		}
	}
</style>
